<script type="text/javascript">
(function () {
    // convert to i18 text
    function c_(x) {
        return RED._("node-red-dashboard/ui_ui_control:ui_ui_control."+x);
    }

    RED.nodes.registerType('ui_ui_control', {
        category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
        color: 'rgb( 63, 173, 181)',
        defaults: {
            name: {value:""},
            events: {value:"all"}
        },
        inputs:1,
        outputs:1,
        align: "right",
        icon: "ui_link.png",
        paletteLabel: 'ui control',
        label: function() { return this.name || "ui control"; },
        labelStyle: function() { return this.name?"node_label_italic":""; },
        outputLabels: function() { return this.events; },
        oneditprepare: function() {
            var node = this;
            var sel = $("#node-input-events");
            for (var name of ["all", "change", "connect"]) {
                var text = c_("events."+name);
                $("<option/>").val(name).text(text).appendTo(sel);
            }
            $(sel).val(node.events);
        },
    });
})();
</script>

<script type="text/html" data-template-name="ui_ui_control">
    <div class="form-row">
        <label for="node-input-events"><i class="fa fa-sign-out"></i> <span data-i18n="ui_ui_control.label.output"></span></label>
        <select id="node-input-events" style="width:70%;">
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui_ui_control.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]ui_ui_control.placeholder.name">
    </div>
</script>
